<!DOCTYPE html>
<html ng-app="indexApp" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link th:href="@{/bootstrap/dist/css/bootstrap.css}" rel="stylesheet">
    <!--<link th:href="@{/bootstrap/dist/css/bootstrap-theme.css}" rel="stylesheet">-->
    <link th:href="@{/css/jquery-ui.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/sweetalert2.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-2.1.4.js}"></script>
    <script th:src="@{/bootstrap/dist/js/bootstrap.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/angular.js}"></script>
    <script th:src="@{/js/angular-route.js}"></script>
    <script th:src="@{/js/angular-ui-router.js}"></script>
    <script th:src="@{/ng/indexApp.js}"></script>
    <script th:src="@{/ng/relationExtractionCtrl.js}"></script>
    <script th:src="@{/js/plugins/sweetalert.min.js}"></script>
    <title>关系抽取</title>
</head>
<body ng-controller="relationExtractionCtrl">
<div class="container-fluid" style="margin-top: 50px">
    <!--
            <div class="row">
                <div class="col-sm-8 col-md-8">
                    <div class="alert alert-info alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>说 明</strong> 确定数据集路径和完成参数配置保存后才可以执行任务创建。
                    </div>
                </div>
            </div>
    -->

    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">数据配置</div>
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">选择数据集</div>
                                <div class="panel-body">
                                    <div class="row">
                                        <!--
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <input type="text" class="form-control input-sm"
                                                    id="mysqlConfig-ip" placeholder="ip"
                                                    ng-model="mysqlConfig.ip">
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <input type="text" class="form-control input-sm"
                                                    id="mysqlConfig-port" placeholder="port"
                                                    ng-model="mysqlConfig.port">
                                            </div>

                                        </div>
                                        -->
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <input type="text" class="form-control input-sm" ng-readonly="true"
                                                       id="mysqlConfig-db" placeholder="db"
                                                       ng-model="mysqlConfig.dbName">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <input type="text" class="form-control input-sm" ng-readonly="true"
                                                       id="mysqlConfig-username" placeholder="username"
                                                       ng-model="mysqlConfig.username">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <input type="password" class="form-control input-sm"
                                                       id="mysqlConfig-password" placeholder="password"
                                                       ng-model="mysqlConfig.password">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button"
                                                    class="btn btn-primary btn-sm btn-block"
                                                    ng-click="connectMySQL();listMySQLTables()">连接数据源
                                            </button>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button"
                                                    class="btn btn-secondary btn-sm btn-block"
                                                    ng-click="disconnectMySQL()">关闭数据源
                                            </button>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" ng-show="runExtractBtnShow == 0"
                                                    class="btn btn-disabled btn-sm btn-block text-muted">执行抽取任务
                                            </button>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" ng-show="runExtractBtnShow == 1"
                                                    class="btn btn-success btn-sm btn-block"
                                                    ng-click="runExtractTask()">执行抽取任务
                                            </button>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" ng-show="runExtractBtnShow == 2"
                                                    class="btn btn-disabled btn-sm btn-block">抽取中...
                                            </button>
                                        </div>
                                    </div>

                                    <!--
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">日 志</label>
                                                <textarea class="form-control" rows="2">{{logForConnection}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                     -->

                                    <div class="row" ng-show="mysqlDbInfoVisible">
                                        <div class="col-md-6">
                                            <table
                                                    class="table table-bordered table-condensed table-hover">
                                                <caption>数据表</caption>
                                                <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>表名</th>
                                                    <th>操作</th>
                                                    <th>选择</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="table in mysqlTables">
                                                    <td>{{$index+1}}</td>
                                                    <td>{{table}}</td>
                                                    <td>
                                                        <button type="button"
                                                                class="btn btn-default btn-xs"
                                                                ng-click="getMySQLTableDesc(table);getMySQLTableSampleData(table)">
                                                            表信息
                                                        </button>
                                                    </td>
                                                    <td><input id="table-{{table}}" name="{{table}}"
                                                               type="checkbox" ng-checked="isSelected(key,table)"
                                                               ng-click="updateTableSelection($event,key,table)"/></td>
                                                </tr>
                                                <tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <table class="table table-bordered table-condensed table-hover">
                                                <caption>&nbsp;</caption>
                                                <thead>
                                                <tr>
                                                    <th>表名</th>
                                                    <th>主键</th>
                                                    <th>已选字段</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="table in tableSelected">
                                                    <td>{{table}}</td>
                                                    <td>{{primaryKeySelected[table]}}</td>
                                                    <td>{{columnSelected[table]}}</td>
                                                </tr>
                                                <tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="row" ng-show="mysqlDbTableSampleVisible">
                                        <div class="col-md-12">
                                            <div class="table-responsive" style="overflow-x:scroll">
                                                <table class="table table-bordered table-condensed table-hover">
                                                    <caption>数据表 {{currentMySQLTable}} 的数据样例</caption>
                                                    <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th ng-repeat="(key, value) in currentMySQLTableDesc">{{key}}
                                                        </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr ng-repeat="item in mysqlTableSampleData">
                                                        <td>{{$index+1}}</td>
                                                        <td ng-repeat="(key, value) in currentMySQLTableDesc">
                                                            {{item[key]|limitTo:10}}
                                                        </td>
                                                    </tr>
                                                    <tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" ng-show="mysqlDbTableStrucVisible">
                                        <div ng-repeat="table in tableSelected">
                                            <div class="col-md-6">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-condensed table-hover">
                                                        <caption>数据表 {{table}} 的结构</caption>
                                                        <thead>
                                                        <tr>
                                                            <th>No</th>
                                                            <th>列名</th>
                                                            <th>列数据类型</th>
                                                            <th>主键</th>
                                                            <th>数据字段</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr ng-repeat="(key, value) in mysqlTableDesc[table]">
                                                            <td>{{$index+1}}</td>
                                                            <td>{{key}}</td>
                                                            <td>{{value}}</td>
                                                            <td><input id="{{table}}-{{key}}-pk" name="{{key}}"
                                                                       type="checkbox"
                                                                       ng-checked="isColumnSelected(key,table,'pk')"
                                                                       ng-click="updateColumnSelection($event,key,table,'pk')"
                                                                       ng-disabled="!isColumnSelected(key,table,'pk') && (primaryKeySelectedNum[table]>=1)"/>
                                                            </td>
                                                            <td><input id="{{table}}-{{key}}" name="{{key}}"
                                                                       type="checkbox"
                                                                       ng-checked="isColumnSelected(key,table)"
                                                                       ng-click="updateColumnSelection($event,key,table)"
                                                                       ng-disabled="!isColumnSelected(key,table) && (columnSelectedNum[table]>=2)"/>
                                                            </td>
                                                        </tr>
                                                        <tbody>
                                                    </table>
                                                </div>
                                                <!--
                                                <pre>{{selectedTagsString}}</pre>
                                                <pre>{{selected|json}}</pre>
                                                <pre>{{selectedTags|json}}</pre>
                                                 -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
</html>